<template>
  <view class="pos-mask ev-n">
    <view class="pos-a trans-300" v-show="isAnim" :style="[animPos]">
      <u-icon name="plus-circle-fill" size="20" color="#f51"></u-icon>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  props: {
    inTab: Boolean,
  },
  computed: {
    ...mapState(["sysInfo"]),
  },
  data() {
    return {
      isAnim: false,
      animPos: {},
    };
  },
  watch: {},
  created() {
    uni.$on("cart-anim", (e) => {
      this.onPos(e);
    });
  },
  methods: {
    async onPos(e) {
      if (this.isAnim) return;
      let top = e.y;
      if (this.inTab) {
        top += 40; //+ 44 + this.sysInfo.statusBarHeight;
      }
      this.animPos = {
        left: e.x + "px",
        top: top + "px",
      };
      this.isAnim = true;
      await this.$sleep(100);
      this.animPos = {
        left: "60vw",
        top: "100vh",
      };
      await this.$sleep(300);
      this.isAnim = false;
    },
  },
};
</script>
